import React, { useState } from 'react';
import { Sender } from '@ant-design/x';
import { Flex } from 'antd';


const InputArea = (props: any) => {
  const { isResponding, onSend } = props;
  const [value, setValue] = useState('今日新闻');
  const [loading, setLoading] = useState(false);

  const handleSubmit = () => {
    setValue('');
    setLoading(true);
    onSend(value);
  }

  const handleCancel = () => {
    setLoading(false);
  }

  return (
    <Flex vertical gap="middle" style={{ width: '100%' }}>
      <Sender
        loading={isResponding}
        value={value}
        onChange={(v) => {
          setValue(v);
        }}
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      />
    </Flex>
    
  )
};

export default InputArea;
